<template>
  <div class="app-container">
    <!-- 商户的首页 -->
    <div class="index_page" v-if="shopInfo">

      <!-- 订单统计 -->
      <!-- <div class=" flex">
        <div class="jifen_box ">
          <div class="jifen_rg">
            <div class="tit">剩余虞豆</div>
            <div class="jifen_num">
              <img style="width:24px;height:24px" src="../../assets/img/home/jindou.png" alt="">
              <span v-if="shopInfo">{{shopInfo.campNumber}}</span>
              <span v-else>0</span>
            </div>
            <div class="btn" v-if="shopInfo">
              <el-button type="primary" @click="chongzhijifen">一键充值</el-button>
            </div>
          </div>
        </div>
        <div class="kucun_box">
          <img style="width:70px;height:70px" src="../assets/img/home/jindou2.png" alt="">
          <div class="tit flex">
            <img src="../assets/img/home/zhuyi.png" alt="">
            <span>滞销商品</span>
          </div>
          <div class="num">{{kucunNum}}</div>
        </div>
        <div class="card kucun_box">
          <div>
            <subtit title="待办"></subtit>
            <div class="cont_box flex">
              <div class="item">
                <div class="flex">
                  <img src="../../assets/img/zhuanshouicon.png" alt="">
                  <div>转手未处理</div>
                </div>
                <div class="num">{{monitorTaskErrNum.zhuanshou||0}}</div>
              </div>
              <div class="item">
                <div class="flex">
                  <img src="../../assets/img/diaobangicon.png" alt="">
                  <div>掉绑未处理</div>
                </div>
                <div class="num">{{monitorTaskErrNum.diaobang||0}}</div>
              </div>
              <div class="item">
                <div class="flex">
                  <img src="../../assets/img/zhixiaoicon.png" alt="">
                  <div>滞销商品</div>
                </div>
                <div class="num">{{kucunNum||0}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="kucun_box">
          <div class="tit flex">
            <span>账号监控</span>
          </div>
          <div class="">掉绑待处理{{monitorTaskErrNum.diaobang}}</div>
          <div class="">转手待处理{{monitorTaskErrNum.zhuanshou}}</div>
        </div>
        <div class="card order_total_box">
          <div>
            <subtit title="订单统计"></subtit>
            <div class="cont_box flex">
              <div class="num_item flex jyz">
                <img src="../../assets/img/home/jiaoyizhong.png" alt="">
                <div class="rg">
                  <div class="tit">交易中</div>
                  <div class="num">{{orderTotalNums.inPaySaleOrderNum}}</div>
                </div>
              </div>
              <div class="num_item flex jywc">
                <img src="../../assets/img/home/wancheng.png" alt="">
                <div class="">
                  <div class="tit">交易完成</div>
                  <div class="num">{{orderTotalNums.sucessSaleOrderNum}}</div>
                </div>
              </div>
              <div class="num_item flex jysb">
                <img src="../../assets/img/home/shibai.png" alt="">
                <div class="">
                  <div class="tit">交易失败</div>
                  <div class="num">{{orderTotalNums.cancelSaleOrderNum}}</div>
                </div>
              </div>
              <div class="num_item flex shtj">
                <img src="../../assets/img/home/shouhou.png" alt="">
                <div class="">
                  <div class="tit">售后统计</div>
                  <div class="num">{{orderTotalNums.totalSaleOrderAfterNum}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 订单走势和销售人订单数据 -->
      <div class="order_byday_person flex">
        <!-- <div class="shangpin_total card">
          <subtit title="商品统计"></subtit>
          <div class="search_box flex">
            <el-select style="width:130px" filterable v-model="queryParams.gameId" placeholder="请选择游戏" clearable size="small">
              <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
            <el-button style="width:56px;height:32px;background-color:#6C5DD3;font-size:12px;color:#fff;padding:0;border-radius:3px;margin-left:8px" type="primary" icon="el-icon-search" @click="getgoodsStatebyGame">
              搜索</el-button>
          </div>
          <div class="goods_nums">
            <div class="total_num">
              <span>全部商品：<span style="color:#6C5DD3;font-size:24px">{{goodsNums.total}}</span></span>
              <span style="margin-left:10px">总成本：<span style="color:#6C5DD3;font-size:24px">¥{{goodsNums.totalCostPrice}}</span></span>
              <span style="margin-left:10px;white-space: nowrap;">总售价：<span style="color:#6C5DD3;font-size:24px">¥{{goodsNums.totalPrice}}</span></span>
            </div>
            <div class="type_box" v-if="goodsNums.total||goodsNums.total===0">
              <div class="item flex">
                <img src="../../assets/img/home/zaishoushangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>在售商品:{{goodsNums.weishou}}</span>
                      <span>成本:¥{{goodsNums.weishouCostPrice}}</span>
                      <span>售价:¥{{goodsNums.weishouPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.weishou,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.weishou,goodsNums.total)" color="#6C5DD3"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../../assets/img/home/yishoushangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>已售商品:{{goodsNums.yishou}}</span>
                      <span>成本:¥{{goodsNums.yishouCostPrice}}</span>
                      <span>售价:¥{{goodsNums.yishouPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.yishou,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.yishou,goodsNums.total)" color="#7FBA7A"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../../assets/img/home/jiaoyizhongshangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>交易中:{{goodsNums.jiaoyizhong}}</span>
                      <span>成本:¥{{goodsNums.jiaoyizhongCostPrice}}</span>
                      <span>售价:¥{{goodsNums.jiaoyizhongPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.jiaoyizhong,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.jiaoyizhong,goodsNums.total)" color="#FFCE73"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../../assets/img/home/xiajiashangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>下架商品:{{goodsNums.xiajia}}</span>
                      <span>成本:¥{{goodsNums.xiajiaCostPrice}}</span>
                      <span>售价:¥{{goodsNums.xiajiaPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.xiajia,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.xiajia,goodsNums.total)" color="#FFE100"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../../assets/img/home/shenhezhong.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>待审核商品:{{goodsNums.daishenhe}}</span>
                      <span>成本:¥{{goodsNums.daishenheCostPrice}}</span>
                      <span>售价:¥{{goodsNums.daishenhePrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.daishenhe,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.daishenhe,goodsNums.total)" color="#FFE100"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../../assets/img/home/wentishangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>问题商品:{{goodsNums.wenti}}</span>
                      <span>成本:¥{{goodsNums.wentiCostPrice}}</span>
                      <span>售价:¥{{goodsNums.wentiPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.wenti,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.wenti,goodsNums.total)" color="#FFA2C0"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../../assets/img/home/sunhaoshangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>损耗商品:{{goodsNums.zhaohui}}</span>
                      <span>成本:¥{{goodsNums.zhaohuiCostPrice}}</span>
                      <span>售价:¥{{goodsNums.zhaohuiPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.zhaohui,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.zhaohui,goodsNums.total)" color="#A0D7E7"></el-progress>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div> -->

        <div class="zhuce_yonghu card">
          <subtit title="用户注册统计"></subtit>
          <zhuceByDay></zhuceByDay>
        </div>
      </div>

      <div class="zhuce_shangpin flex" v-if="showTuiguang">
        <!-- <div style="width:calc(50% - 15px)" class="zhuce_box card">
          <subtit title="APP推广数据-小米"></subtit>
          <tuiguangByDayXiaoMiVue></tuiguangByDayXiaoMiVue>
        </div>
        <div style="width:50%;margin-left:15px" class="zhuce_box card">
          <subtit title="APP推广数据-华为"></subtit>
          <tuiguangByDayHuaWeiVue></tuiguangByDayHuaWeiVue>
        </div>
        <div style="width:calc(50% - 15px)" class="zhuce_box card">
          <subtit title="APP推广数据-VIVO"></subtit>
          <tuiguangByDayVIVOVue></tuiguangByDayVIVOVue>
        </div>
        <div style="width:50%;margin-left:15px" class="zhuce_box card">
          <subtit title="APP推广数据-OPPO"></subtit>
          <tuiguangByDayOPPO></tuiguangByDayOPPO>
        </div> -->
        <div style="width:calc(100%)" class="zhuce_box card">
          <subtit title="APP推广数据">
            <div style="margin: 10px 0;padding-left: 20px;">
              <el-select @change="getBaobiao" size="small" style="width:130px;margin-right: 10px;" v-model="zhuceBaobiaoParams.xyType" placeholder="请选择手机品牌">
                <el-option v-for="(item,i) in xyTypeArr" :key="i" :label="item.name" :value="item.value" />
              </el-select>
              <el-date-picker @change="getBaobiao" size="small" style="width: 260px;" v-model="timerange" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
              <el-button size="small" style="margin-left:10px" type="primary" @click="getBaobiao">查询</el-button>
            </div>
          </subtit>

          <div class="flex" style="width: 100%;">
            <div class="charts-box" style="width: calc(50%);padding-top: 10px;">
              <div v-if="zhuceBaobiaoParams.xyType=='xiaomi'">
                <tuiguangByDayXiaoMiVue :startTime="zhuceBaobiaoParams.startTime" :endTime="zhuceBaobiaoParams.endTime"></tuiguangByDayXiaoMiVue>
              </div>
              <div v-if="zhuceBaobiaoParams.xyType=='huawei'">
                <tuiguangByDayHuaWeiVue :startTime="zhuceBaobiaoParams.startTime" :endTime="zhuceBaobiaoParams.endTime"></tuiguangByDayHuaWeiVue>
              </div>
              <div v-if="zhuceBaobiaoParams.xyType=='vivo'">
                <tuiguangByDayVIVOVue :startTime="zhuceBaobiaoParams.startTime" :endTime="zhuceBaobiaoParams.endTime"></tuiguangByDayVIVOVue>
              </div>
              <div v-if="zhuceBaobiaoParams.xyType=='xiaomi'">
                <tuiguangByDayOPPO :startTime="zhuceBaobiaoParams.startTime" :endTime="zhuceBaobiaoParams.endTime"></tuiguangByDayOPPO>
              </div>
            </div>
            <div class="table_box table_box_new" style="width: 50%;margin-left: 15px;">
              <el-table border stripe :data="zhuceBaobiao" height="400">
                <el-table-column prop="yxType" label="应用商店" width="100"></el-table-column>
                <el-table-column prop="nickName" label="用户昵称"></el-table-column>
                <el-table-column prop="registerNewTime" label="注册时间"></el-table-column>
                <el-table-column prop="consulting" label="是否咨询" width="100">
                  <template slot-scope="scope">
                    <span>
                      <el-tag type="success" v-if="scope.row.consulting==1">已咨询</el-tag>
                      <el-tag type="danger" v-else>未咨询</el-tag>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="pay" label="是否支付" width="100">
                  <template slot-scope="scope">
                    <span>
                      <el-tag type="success" v-if="scope.row.pay==1">已支付</el-tag>
                      <el-tag type="danger" v-else>未支付</el-tag>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <Lianxiwomen ref="Lianxiwomen"></Lianxiwomen>
    </div>
    <div v-else style="color:#666;font-size:30px;text-align:center;line-height:300px">
      欢迎使用 虞都互联~
    </div>

    <haibaoDialog ref="haibaoDialog"></haibaoDialog>
    <!-- 联系对方 -->
    <kefuList ref="kefuList"></kefuList>
  </div>
</template>
<script>
import subtit from "@/components/indexComponents/subtit.vue";
import orderByDayBar from "@/components/indexComponents/orderByDayBar.vue";
import orderByPerson from "@/components/indexComponents/orderByPerson.vue";
import orderAmountByGame from "@/components/indexComponents/orderAmountByGame.vue";
import zhuceByDay from "@/components/indexComponents/zhuceByDay.vue";

// import chongzhi from "./tenantPages/moneys/components/chongzhijifen.vue";
import valueAddedServices from "@/api/shanghuduan/valueAddedServices";

import {
  saleOrderNum,
  goodsStatebyGame,
  goodsCountByTenant,
  yudouCountByTenant,
  getKucunNum,
  monitorTaskErr,
  getSupplerUserTotal,
  getPaihang,
  getModuleYudou,
  getAppTuiguangBaobiao,
} from "@/api/tenantApis/indexStatistics.js";

import resourcesManage from "@/api/PCWebImages/resourcesManage";
import Lianxiwomen from "@/components/ConsignmentFourzero/lianxiwomen.vue";
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
import haibaoDialog from "@/views/tenantPages/shopManage/shopCenter/haibaoDialog.vue";
import kefuList from "@/components/common/kefuList.vue";
import tuiguangByDayXiaoMiVue from "../../components/indexComponents/tuiguangByDayXiaoMi.vue";
// 推广APP  数据统计
import tuiguangByDayHuaWeiVue from "../../components/indexComponents/tuiguangByDayHuaWei.vue";
import tuiguangByDayVIVOVue from "../../components/indexComponents/tuiguangByDayVIVO.vue";
import tuiguangByDayOPPO from "../../components/indexComponents/tuiguangByDayOPPO.vue";
import { getTenantPushSettingsByTenantId } from "@/api/system/shopManage";
export default {
  name:'PingtaiTongji',
  components: {
    subtit,
    orderByDayBar,
    orderByPerson,
    orderAmountByGame,
    zhuceByDay,
    Lianxiwomen,
    haibaoDialog,
    kefuList,
    tuiguangByDayXiaoMiVue,
    tuiguangByDayHuaWeiVue,
    tuiguangByDayVIVOVue,
    tuiguangByDayOPPO,
  },
  data() {
    return {
      bgColors: [
        "#CFC8FF",
        "#FFE3F2",
        "#FFE2AC",
        "#B7EFFF",
        "#FFCEBF",
        "#CFC8FF",
        "#FFE3F2",
        "#FFE2AC",
        "#B7EFFF",
        "#FFCEBF",
      ],
      poxiaoyue: "",
      orderTotalNums: {},
      goodsNums: {},
      queryParams: {
        gameId: "",
      },
      daoqiFuwu: [],
      serviceList: [],
      lunboList: [],
      // 以下是管理端数据
      supplerGoodsTotal: [],
      supplerUserTotal: [],
      supplerGoodsYesterday: [],
      timer: [],

      yudouList: [],
      yudouParams: {
        sortColumn: "",
        sort: "",
      },
      kucunNum: "",
      monitorTaskErrNum: {},
      moduleYudouList: [],
      yudouTypeParams: {
        sortColumn: "",
        sort: "",
      },

      zhuceBaobiao: [],
      zhuceBaobiaoParams: {
        xyType: "",
        startTime: "",
        endTime: "",
      },
      timerange: [],
      xyTypeArr: [
        {
          name: "小米",
          value: "xiaomi",
        },
        {
          name: "华为",
          value: "huawei",
        },
        {
          name: "VIVO",
          value: "vivo",
        },
        {
          name: "OPPO",
          value: "oppo",
        },
      ],
      showTuiguang: false,
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    allGameList() {
      return this.$store.getters.allGameList;
    },
    getBaifenbi() {
      return (num, total) => {
        const baifen = (num / (total || 1)) * 100;
        return Math.round(baifen);
      };
    },
    paihangList() {
      return this.$store.getters.allYouzhiMap;
    },
  },
  // watch: {
  //   userInfo: {
  //     handler(val) {
  //       if (val.tenantId != 1) {
  //         // 这是商户
  //         // console.log("%c Line:346 🍅 这是商户", "color:#3f7cff");
  //         // this.getOrderNums();
  //         this.getgoodsStatebyGame();
  //         // this.getMyService();
  //         // this.getLunbo();
  //         // this.getKucunNumFn();
  //         // this.getmonitorTaskErrFn();
  //       } else {
  //         // 这是管理员
  //         // this.getpoxiao();
  //         // // 计算昨日日期
  //         // // let now = new Date();
  //         // // let end = formatDate(now);
  //         // // let start = formatDate(now.getTime() - 1 * 24 * 3600 * 1000);
  //         // // start = start.slice(0, 10);
  //         // // end = end.slice(0, 10);
  //         // // this.timer = [start, end];
  //         // this.initByAdmin();
  //       }
  //     },
  //     immediate: true,
  //     deep: true,
  //   },
  // },
  created() {
    this.getgoodsStatebyGame();

    // 默认一月时间
    // 获取最近三十天的日期范围
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(startDate.getDate() - 30);

    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    };

    this.timerange = [formatDate(startDate), formatDate(endDate)];
    // this.getBaobiao();
    // if (this.shopInfo && this.shopInfo.tenantId) {
    //   this.$store.dispatch("getShopInfo", this.shopInfo.tenantId);
    // }
  },
  mounted() {
    this.getTuiguangPeizhi();
  },
  methods: {
    // 打开客服弹窗
    openIm(id) {
      this.$refs.kefuList.open(id, 1);
    },
    // 打开我的海报
    myHaibao() {
      this.$refs.haibaoDialog.open();
    },

    // 查询推广配置  getTenantPushSettingsByTenantId
    getTuiguangPeizhi() {
      getTenantPushSettingsByTenantId({
        tenantId: this.userInfo.tenantId,
        type: 3,
      }).then((res) => {
        this.showTuiguang = false;
        this.xyTypeArr = [];
        if (res.data && res.data.settingsJson) {
          const settingObj = JSON.parse(res.data.settingsJson);
          if (settingObj.huawei && settingObj.huawei.state == 1) {
            // 华为已配置
            this.showTuiguang = true;
            this.xyTypeArr.push({
              name: "华为",
              value: "huawei",
            });
          }
          if (settingObj.xiaomi && settingObj.xiaomi.state == 1) {
            // 小米已配置
            this.showTuiguang = true;
            this.xyTypeArr.push({
              name: "小米",
              value: "xiaomi",
            });
          }
          if (settingObj.oppo && settingObj.oppo.state == 1) {
            // oppo已配置
            this.showTuiguang = true;
            this.xyTypeArr.push({
              name: "OPPO",
              value: "oppo",
            });
          }
          if (settingObj.vivo && settingObj.vivo.state == 1) {
            // vivo已配置
            this.showTuiguang = true;
            this.xyTypeArr.push({
              name: "VIVO",
              value: "vivo",
            });
          }
          if (this.xyTypeArr && this.xyTypeArr.length) {
            this.zhuceBaobiaoParams.xyType = this.xyTypeArr[0].value;
            this.getBaobiao();
          } else {
            // 配置都未开启
          }
        } else {
          // 没配置
        }
      });
    },

    // 获取APP推广注册统计报表
    getBaobiao() {
      this.zhuceBaobiao = [];
      if (this.timerange && this.timerange.length == 2) {
        this.zhuceBaobiaoParams.startTime = this.timerange[0] + " 00:00:00";
        this.zhuceBaobiaoParams.endTime = this.timerange[1] + " 23:59:59";
      } else {
        return this.$message.error("请选择日期范围！");
      }
      getAppTuiguangBaobiao(this.zhuceBaobiaoParams).then((res) => {
        this.zhuceBaobiao = res.data;
      });
    },

    // 管理端的方法
    // 管理端统计初始化
    initByAdmin() {
      this.getGoodsTableDataTotal();
      this.getGoodsTableDataTimer();
      this.getYudouList();
      this.getSupplerUserTotal();
      this.getModuleYudouList();
    },
    // 获取模块虞豆消费统计
    getModuleYudouList() {
      getModuleYudou(this.yudouTypeParams).then((res) => {
        this.moduleYudouList = res.data;
      });
    },
    // 虞豆类型统计排序
    yudouTypeTableChange(val) {
      this.yudouTypeParams.sort = val.order == "ascending" ? "asc" : "desc";
      this.yudouTypeParams.sortColumn = val.prop;
      this.getModuleYudouList();
    },
    // 账号统计日期改变
    timerChange(e) {},

    // 商品统计表格 总商品
    getGoodsTableDataTotal() {
      goodsCountByTenant().then((res) => {
        this.supplerGoodsTotal = res.data;
      });
    },
    // 获取商家注册用户统计
    getSupplerUserTotal() {
      getSupplerUserTotal().then((res) => {
        this.supplerUserTotal = res.data;
      });
    },
    // 获取账号统计表格 时间段
    getGoodsTableDataTimer() {
      // day:1昨天
      goodsCountByTenant({ day: 1 }).then((res) => {
        this.supplerGoodsYesterday = res.data;
      });
    },
    // 获取商家虞豆统计
    getYudouList() {
      // sortColumn  sort
      yudouCountByTenant(this.yudouParams).then((res) => {
        this.yudouList = res.data;
      });
    },
    // 虞豆统计排序
    yudouSortChange(val) {
      this.yudouParams.sort = val.order == "ascending" ? "asc" : "desc";
      this.yudouParams.sortColumn = val.prop;
      this.getYudouList();
    },
    // 获取破晓余额
    getpoxiao() {
      checkPhoneApi.pxyue().then((res) => {
        this.poxiaoyue = res.data.data;
      });
    },
    // 以下是商户端的方法
    // 联系我们
    lianxiwomenfn() {
      this.$refs.Lianxiwomen.open();
    },
    // 复制
    copy(txt) {
      this.$copyText(txt).then(() => {
        this.$message.success("已复制到剪切板");
      });
    },
    // 获取轮播图资源
    getLunbo() {
      let obj = {
        systemType: 1,
      };
      resourcesManage.getList(obj).then((response) => {
        // console.log("%c Line:111 🥑 response", "color:#42b983", response);
        this.$nextTick(() => {
          // this.loading = false;
          this.lunboList = JSON.parse(JSON.stringify(response.rows));
          // this.tableData.total = response.total;
        });
      });
    },
    // 跳转链接
    goLink(val) {
      if (val == "/youzhishangjia") {
        return this.$message("正在优化中，请耐心等待...");
      }
      if (val.indexOf("http") > -1) {
        window.open(val, "_blank");
      } else {
        this.$router.push({
          path: val,
        });
      }
    },
    // 立即续费
    goJifenshangchneg() {
      this.$router.push({
        path: "/jifenshangcheng",
      });
    },
    // 获取自己开通的增值服务
    getMyService() {
      // if()
      valueAddedServices
        .myValueAddedServiceList({ dataType: "one" })
        .then((res) => {
          this.daoqiFuwu = [];
          if (res.rows && res.rows.length) {
            this.serviceList = res.rows;
            this.serviceList.forEach((r) => {
              if (this.getDayNum(r.closeTime) <= 5) {
                this.daoqiFuwu.push(r);
              }
            });
          } else {
            this.serviceList = [];
          }
        });
    },
    // 获取日期与当前日期相差天数
    getDayNum(val) {
      let date = Date.parse(new Date(val)) / 1000;
      var today = Date.parse(new Date()) / 1000; //当前时间戳
      var nTime = date - today;
      var day = Math.floor(nTime / 86400) + 1;
      return day;
    },
    // 获取掉绑待处理
    getmonitorTaskErrFn() {
      monitorTaskErr().then((res) => {
        this.monitorTaskErrNum = res.data;
      });
    },
    // 获取滞销商品数量
    getKucunNumFn() {
      getKucunNum().then((res) => {
        this.kucunNum = res.data.unsoldCount;
      });
    },

    getOrderNums() {
      saleOrderNum().then((res) => {
        this.orderTotalNums = res.data;
      });
    },
    getgoodsStatebyGame() {
      goodsStatebyGame(this.queryParams).then((res) => {
        this.goodsNums = res.data;
      });
    },
    // 点击充值
    chongzhijifen() {
      this.$refs.chongzhi.open();
      // this.$refs.paySuccess.open();
    },
    // 虞豆明细
    yudoumingxi() {
      this.$router.push({
        path: "/shopManageByTenant/tenantPages/jifen",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  min-width: 1200px;
  background-color: #f6f6f6;
}
::v-deep .app-main {
  overflow-x: auto;
}
.index_page {
  padding-bottom: 20px;
}
::v-deep .el-statistic .con {
  color: #ffdb00 !important;
}

div {
  box-sizing: border-box;
}
.tit,
.tit40 {
  font-weight: 500;
  font-size: 32px;
  color: #ffffff;
}
.tit40 {
  font-size: 24px;
}
.banner_box {
  width: 100%;
  height: 296px;
  background-image: url("../../assets/img/home/bannerbg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  overflow: hidden;
  justify-content: space-between;
  // align-items: center;
  padding: 18px;

  .linqi_box {
    padding-left: 30px;
    flex-shrink: 0;
    margin-right: 10px;
    min-width: 450px;
    overflow: hidden;
    .el-button {
      color: #6c5dd3;
      background-color: #fff;
      border: none;
      padding: 10px 35px;
      height: 46px;
      border-radius: 16px;
      font-size: 18px;
    }
    .shop-name {
      font-size: 32px;
      color: #fff;
      font-weight: bold;
      > span {
        width: 240px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .domainhost {
      justify-items: center;
      color: #fff;
      font-size: 20px;
      line-height: 40px;
      a {
        // background-color: $--color-success;
        // font-size: 20px;
        // padding: 0 15px;
        border-radius: 4px;
      }
      .el-button {
        margin-left: 10px;
      }
    }
    .item {
      display: flex;
      flex-wrap: nowrap;
      font-weight: 500;
      font-size: 16px;
      color: #ffdb00;
      line-height: 24px;
    }
    .btn {
      margin-top: 15px;
    }
  }
  .lunbo_box {
    min-width: 1000px;
    max-width: 1087px;
    height: 264px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    padding: 10px 15px;
    padding-right: 0;

    .top {
      position: relative;
      font-size: 16px;
      align-items: center;

      .youshi {
        color: #5e78fe;
        margin-left: 20px;
        font-weight: bold;
        padding-top: 15px;
      }
      .moreSJ {
        position: absolute;
        top: 15px;
        right: 26px;
        color: #6c5dd3;
        cursor: pointer;
        text-decoration-line: underline;
      }
    }

    .youzhi_box {
      flex-wrap: wrap;
      margin-top: 35px;
      height: 170px;
      .item {
        height: 54px;
        box-sizing: border-box;
        width: calc(20% - 7px);
        padding-left: 70px;
        // height: 74px;
        margin-right: 6px;
        margin-bottom: 32px;
        // text-align: center;
        // flex-wrap: nowrap;
        // overflow: hidden;
        border-radius: 27px;
        position: relative;
      }
      .touxiang {
        width: 56px;
        height: 56px;
        background: #ffffff;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        top: -20px;
        left: 10px;
        img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin: 0 auto;
          margin-top: 4px;
        }
      }
      // .rg {
      //   width: calc(100% - 50px);
      //   margin-left: 5px;
      // }
      .name {
        color: #5f75ee;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 54px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
.card {
  padding: 18px;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}
.order_total_box {
  width: 100%;
  margin-top: 0;
  .cont_box {
    flex-wrap: nowrap;
    margin-top: 10px;
    .num_item {
      background: #ffa2c0;
      border-radius: 8px;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
      height: 120px;
      width: 25%;
      color: #ffffff;
      &.jywc {
        background: #ffce73;
      }
      &.jysb {
        background: #a0d7e7;
      }
      &.shtj {
        background: #7fba7a;
      }
      img {
        width: 70px;
        height: 70px;
        margin-right: 15px;
      }
      .tit {
        font-weight: bold;
        font-size: 16px;

        height: 30px;
        line-height: 40px;
      }
      .num {
        font-weight: 500;
        font-size: 24px;
        line-height: 40px;
      }
    }
    @media screen and (max-width: 1650px) {
      .num_item {
        img {
          width: 45px;
          height: 45px;
          margin-right: 8px;
        }
        .tit {
          font-size: 14px;
        }
        .num {
          font-size: 22px;
        }
      }
    }
  }
}
.jifen_box {
  margin-top: 20px;
  width: 180px;
  border-radius: 10px;
  background: #fff;
  padding: 22px;
  margin-right: 16px;
  flex-shrink: 0;
  color: $primary;
  .jifen_rg {
    width: 100%;
    text-align: center;
    line-height: 50px;
    .tit {
      font-size: 28px;
      color: $primary;
      font-weight: 600;
    }
    .jifen_num {
      font-weight: 500;
      font-size: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        // vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
}
.kucun_box {
  width: 460px;
  border-radius: 10px;
  background: #fff;
  padding: 22px;
  padding-bottom: 10px;
  margin-right: 16px;
  margin-top: 20px;
  text-align: center;
  color: #333;
  flex-shrink: 0;
  .cont_box {
    justify-content: space-between;
    padding-top: 10px;
  }
  .item {
    width: 129px;
    height: 129px;
    background-image: url("../../assets/img/daibanbg.png");
    background-size: 100% 100%;
    padding: 16px;

    > .flex {
      align-items: center;
      font-size: 12px;
      font-weight: bold;
      div {
        margin-left: 5px;
        color: #000;
      }
    }
    img {
      width: 32px;
      height: 32px;
    }
  }
  .num {
    font-size: 26px;
    margin-top: 20px;
    color: $primary;
  }
}
.order_byday_person {
  .order_day {
    width: 100%;
  }
}
.zhuce_box {
  width: 100%;
}
.zhuce_yonghu {
  width: 100%;
  margin-top: 0;
}
.zhuce_shangpin {
  flex-wrap: wrap;
}
.shangpin_total {
  width: 560px;
  flex-shrink: 0;
  margin-right: 16px;
  position: relative;
  margin-top: 0;
  .search_box {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  .total_num {
    font-size: 18px;
    text-align: center;
    padding-top: 20px;
  }
  .type_box {
    .item {
      margin-top: 12px;
      align-items: center;
      img {
        width: 36px;
        height: 36px;
        margin-right: 8px;
        flex-shrink: 0;
      }
      .rg {
        width: 100%;

        .num_box {
          justify-content: space-between;
          font-size: 16px;
          margin-bottom: 5px;
          font-weight: bold;
          .num {
            display: flex;
            > span {
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
}
</style>

